<template>
  <el-tree
      ref="simpleTree"
      :data="treeData"
      :props="props"
      node-key="catId"
      show-checkbox
      @check-change="handleCheckChange"
  />
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {loadNodeData} from "@/api/product";
import {ElTree} from "element-plus";

interface Tree {
  name: string
}

// label为显示名称，children为子节点数据项
const props = {
  label: 'name',
  children: 'children',
}

const treeData = ref([])

// 为el-tree组件指定实例别名,实例别名的类型必须为组件本身，只有如此，才能称之为组件的实例对象，才能通过该实例调用组件中封装的方法，参考如下
const simpleTree = ref<InstanceType<typeof ElTree>>()

// 当我们操作checkbox选项框时触发
const handleCheckChange = (
    data: Tree,
    checked: boolean,
    indeterminate: boolean
) => {
  console.log(data, checked, indeterminate)
  // ! 感叹号表示搭配的属性一定有值，不会为空
  let checkedNodes = simpleTree.value!.getCheckedNodes(false, false)
  let catIdList = []
  // 如果需要批量处理数据，可以遍历节点获取关键数据
  for (let i = 0; i < checkedNodes.length; i++) {
    let catId = checkedNodes[i].catId
    catIdList.push(catId)
  }
  console.log("选中的节点:", checkedNodes)
  console.log("选中节点的所有catId:", catIdList)
}

// 该组件一绚烂就发送请求获取节点所有数据
const loadTreeData = () => {
  loadNodeData().then(response => {
    console.log("SimpleTree loadNodeTree Response: " + response.data)
    treeData.value = response.data
  }).catch(error => {
    console.log("SimpleTree loadNodeTree Error: " + error.message)
  })
}

loadTreeData()

// 笔记：如果想通过组件实例对象来调用组件封装的方法可以使用 ref 属性来为组件关联一个响应式变量，
// 同时指定其具体类型，只有指定了类型才能调用到组件封装的方法
</script>
